<template id="item-template">
<ul >
    <div
      class="bold"
      @click="toggle"
      :id="model._id"
    >
      <!--@dblclick="changeType"-->
      <span>{{ model.testcaseName }}</span>
      <span v-if="isFolder">{{ open ? '-' : '+' }}</span>
    </div>
    <div v-show="open" v-if="isFolder" >
      <relationDependency
        class="item"
        v-for="(model, index) in model.dependency"
        :id="model.testcaseID"
        ref="tree"
        :key="index"
        :model="model">
      </relationDependency>
    </div>

</ul>
</template>
<script>


export default {
  name:'relationDependency',
  props: {
    model: Object
  },
  data(){
    return {
      open: false
    }
  },
  computed: {
    isFolder: function () {
      return this.model.dependency &&
        this.model.dependency.length
    }
  },
  methods: {
    toggle: function () {
      if (this.isFolder) {
        this.open = !this.open;
      }
    },

    parseTreeJson : function (testcaseID,treeNodes){
      if (!treeNodes || !treeNodes.length) return;

      for (var i = 0, len = treeNodes.length; i < len; i++) {

        var childs = treeNodes[i].Dependency;
        new LeaderLine(document.getElementById(testcaseID),document.getElementById(treeNodes[i].testcaseID));
        console.log(treeNodes[i].testcaseName);
        console.log('treeNodes[i].testcaseID ',document.getElementById(treeNodes[i].testcaseID));
        if(childs && childs.length > 0){
          this.parseTreeJson(treeNodes[i].testcaseID,childs);
        }
      }
    },
    buildTree : function (model,index) {

    },
  },
  mounted(){

  },
  created(){

  }
}

</script>
<style>
  .item {
    cursor: pointer;
    width: 60px;
    line-height: 20px;
    /*height:50px;*/

  }
  .bold {

    border:1px solid ;
    border-radius: 5px;
    background-color: #409EFF;
    /*font-weight: bold;*/
    line-height: 20px;

  }

</style>
